import React from 'react';
import { connect } from 'dva';
import { Link } from 'dva/router';
import Container from '../components/Base/Container';
import { List, InputItem, WhiteSpace, WingBlank, Button, Toast } from 'antd-mobile';
import { createForm } from 'rc-form';
import styles from './FindPWD.css';

class FindPWD extends React.Component{

  sendCode=()=>{
    this.props.form.validateFields(['phone'], (errors, values) => {
      if(this.props.auth.btnDisabled){
        Toast.fail("60s还没到",1)
        return
      }
      else{
        if (errors) {
          return;
        }

        if(!values.phone){
          Toast.fail('手机号码错误', 1);
          return
        }

        values.phone = values.phone.replace(/\s/ig, '');

        this.props.dispatch({
          type: 'auth/sendCode',
          payload: { phone:values.phone },
        })
      }



    });
  }

  findClick=()=>{
    this.props.form.validateFields((error, value) => {
      if (error){
        return
      }

      if(!value.phone){
        Toast.fail('手机号码错误', 1);
        return
      }

      value.phone = value.phone.replace(/\s/ig, '');

      if(!value.code){
        Toast.fail('请输入验证码', 1);
        return
      }

      if(!value.password||!value.password2||value.password!==value.password2){
        Toast.fail('两次密码有错', 1);
        return
      }

      this.props.dispatch({
        type: 'auth/findPassword',
        payload: value,
      })
    });
  }

  render(){
    const { getFieldProps } = this.props.form;
    return(
      <Container title="找回密码">
        <List>
          <InputItem
            {...getFieldProps('phone', {
            })}
            type="phone"
            placeholder="请输入手机号码"
          >手机号码</InputItem>
          <InputItem
            {...getFieldProps('code')}
            placeholder="请输入验证码"
            extra={<div style={{color:"rgb(79,161,197)",fontWeight:"bold"}}>{this.props.auth.btnText}</div>}
            onExtraClick={this.sendCode}
          >验证码</InputItem>

          <InputItem
            {...getFieldProps('password')}
            type="password"
            placeholder="请输入新密码"
          >新密码</InputItem>

          <InputItem
            {...getFieldProps('password2')}
            type="password"
            placeholder="请再次输入密码"
          >确认密码</InputItem>
        </List>
        <WhiteSpace/>
        <WingBlank>
          <Button type="primary" onClick={this.findClick}>提交</Button>
        </WingBlank>

      </Container>


    )
  }
}

function mapStateToProps({auth}) {
  return {auth}
}

export default connect(mapStateToProps)(createForm()(FindPWD));
